<template>
	<view>
		<view class="nav">
			<view class="nav-btn">
				<view class="nav-btn-action" v-if="btnCurr!==0" @click="changeMonth(-1)">&lt;</view>
			</view>
			<view>{{date}}</view>
			<view class="nav-btn">
				<view class="nav-btn-action" v-if="btnCurr!==btnMax" @click="changeMonth(1)">&gt;</view>
			</view>
		</view>

		<view class="title">
			<view v-for="ii in week" class="calender-title" :key="ii">
				{{ii}}
			</view>
		</view>
		<view class="calender-out">
			<view v-for="(item,index) in datelist" :key="index" class="calender">
				<view :class="[execDis(item)?'select':'unselect', item.selected?'on-select':'']"
					@click="selectDate(item)">
					<view>{{item.days}}</view>
					<view>{{item.isAppointmentFull==='1'?' (满)':''}}</view>
				</view>
			</view>
		</view>
		<view style="clear: both;"></view>
		<view class="desc">
			<view>
				<view class="flag flag1"></view>
				<view>可预约</view>
			</view>
			<view>
				<view class="flag flag2"></view>
				<view>不可预约</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				week: ['日', '一', '二', '三', '四', '五', '六'],
				// listArr: this.list,
				seleteDay: ''
			}
		},
		props: {
			// 检测类型 + 其他验证
			datelist: {
				type: Array,
				required: true
			},
			date: {
				type: String,
				required: true
			},
			btnCurr: {
				type: Number,
				required: true,
			},
			btnMax: {
				type: Number,
				required: true,
			},

			// age: {
			// 	type: Number,
			// 	default: 0,
			// 	required: true,
			// 	validator: function(value) {
			// 		return value >= 0
			// 	}
			// }
		},
		computed: {
			// myList() { //当新定义的变量变更时，计算属性也会自动更新
			// 	let tempList = this.listArr
			// 	let newArr = []
			// 	let blankArr = []
			// 	if (tempList.length > 0) {
			// 		let firstObj = tempList[0]
			// 		for (let i = 0; i < firstObj.weekValue; i++) {
			// 			blankArr.push({
			// 				day: '',
			// 				days: '',
			// 				isAppointmentFull: '0',
			// 				isCloudAppointment: '0',
			// 				weekValue: i === 0 ? 7 : i
			// 			})
			// 		}
			// 		newArr = blankArr.concat(tempList)
			// 		console.log(newArr);
			// 		return newArr
			// 	}
			// },
		},
		methods: {
			execDis(item) {
				return item.isCloudAppointment !== '0' && item.isAppointmentFull !== '1'
			},
			selectDate(item) {
				this.$emit("selectDate", item)
			},
			changeMonth(p) {
				this.$emit("changeMonth", p)
			},
		}
	}
</script>

<style scoped lang="scss">
	$main-color: green;
	$main-color-sec: #f2f2f2;

	.nav {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.nav-btn {
			width: 14.2857%;

			.nav-btn-action {
				font-size: 14px;
				font-weight: bold;
				color: #666;
				padding: 15px;
				text-align: center;
			}
		}
	}

	.title {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 44px;
		border-bottom: 1px solid #f2f2f2;

		.calender-title {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 14.2857%;
			height: 44px;
			font-weight: bold;
			text-align: center;
			box-sizing: border-box;
			border-left: 1px solid #f2f2f2;
			// margin: 1px;
		}
	}

	.calender-out {
		.calender {
			width: 14.2857%;
			height: 44px;
			box-sizing: border-box;
			float: left;
			// margin-bottom: 2px;
			font-size: 14px;
			font-weight: bold;
			color: #666;
			border-bottom: 1px solid #f2f2f2;
			border-left: 1px solid #f2f2f2;
		}

		.calender:last-child {
			box-sizing: inherit;
			// background-color: red;
			border-right: 1px solid #f2f2f2;
		}

		.select {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: $main-color;
			height: 100%;
			color: #ffffff;
		}

		.unselect {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			background-color: #666;
		}

		.on-select {
			background-size: 50% 50%;
			background-repeat: no-repeat;
			background-image: url('../../static/selected.png');
			background-position: right bottom;
		}
	}

	.desc {
		display: flex;
		justify-content: space-around;
		align-items: center;

		>view {
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 14px;
			color: #999;
			padding: 15px;

			.flag {
				width: 20px;
				height: 20px;
				box-sizing: border-box;
				margin-right: 6px;
			}

			.flag1 {
				background-color: $main-color;
			}

			.flag2 {
				border: 1px solid #ccc;
				background-color: #ffffff;
			}
		}
	}
</style>